<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar title="登录" />
    <!-- 登录表单          error-message="手机号格式错误"-->
    <van-cell-group inset>
      <van-field
        v-model.trim="mobile"
        required
        label="手机号"
        placeholder="请输入手机号"
        :error-message="mobileErrmsg"
        @input="validate"
      />
      <van-field
        v-model.trim="code"
        required
        label="验证码"
        placeholder="请输入验证码"
        :error-message="codeErrmsg"
        @input="validate"

      />
    </van-cell-group>
    <!-- 登录按钮 -->
    <div class="btn-wrap">
      <van-button type="info" @click="login">登录</van-button>
    </div>
  </div>
</template>

<script>
import { reqLogin } from '@/api/user.js'
import { mapMutations } from 'vuex'
export default {
  name: 'Login',
  //   目标：先完成登录功能（校验随后做）
  // 1.按钮绑定事件
  // 2,发送请求（找文档，看请求方式，请求地址，需要传递的参数）
  // 3.查看发送请求返回的结果
  data () {
    return {
      mobile: '13949549594',
      code: '246810',
      mobileErrmsg: '',
      codeErrmsg: ''
    }
  },
  methods: {
    ...mapMutations('user', ['setUserToken']),
    // 单独将校验的业务逻辑抽离到一个函数中并设置这个函数的返回值
    validate () {
      if (!this.mobile.length) {
        this.mobileErrmsg = '请输入正确的手机号'
        return false
      }
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        this.mobileErrmsg = '请输入11位手机号'
        return false
      }
      this.mobileErrmsg = ''
      if (!this.code.length) {
        this.codeErrmsg = '请输入验证码'
        return false
      }
      if (!/^\d{6}$/.test(this.code)) {
        this.codeErrmsg = '请输入6位验证码'
        return false
      }
      this.codeErrmsg = ''
      return true
    },
    async login () {
      if (!this.validate()) return
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭
        overlay: true, // 整体添加一个遮罩
        message: '加载中...',
        forbidClick: true
      })
      const res = await reqLogin(this.mobile, this.code)

      this.setUserToken(res.data.data)
      // Toast默认采用单例模式，即同一时间只会存在一个Toast
      // 登录跳转之前 判断路由信息对象中是否有backto字段, 如果有 说明是被拦截的， 需要让用户原路返回
      if (this.$route.query.backto) {
        this.$router.back()
        // 如果是自己访问的登录页面， 让用户去首页
      } else {
        this.$router.push('/')
      }
      this.$toast.success('登录成功')
    }
  }
}
</script>

<style lang="scss" scoped >
.btn-wrap {
  padding: 15px;
  .van-button {
    width: 100%;
    border-radius: 5px;
  }
}
</style>
